@/*
    	表格标签的参数说明:

    id : table表格的id
    entity: entity
    entityId: entity's id
    editable: false or true,
    height: height
@*/
<style type="text/css">
.emptyField{
	font-style: italic;
	color: #ccc;
}
</style>
<table id="${id}" data-mobile-responsive="true" data-click-to-select="true"
 data-editable="true"
 data-editable-mode="inline"
 data-editable-emptytext="空"
 data-editable-emptyclass="emptyField"
 >
    <thead>
        <tr>
            <th data-field="selectItem" data-checkbox="true"></th>
        </tr>
    </thead>
</table>
<div id="${id}Toolbar">
<#button btnCss="primary" name="添加"   icon="fa-plus" id="extAddBtn" />
<#button btnCss="primary" name="数据"   icon="fa-eye" id="dataViewBtn" />
</div>
<script>
$(document).ready(function(){
	var tableId = "${id}";
	var entity = "${entity}";
	var entityId = "${entityId}";
	function operationFormatter(v,r,i,f){
		return '<a href="javascript:void(0);" class="del">删除</a>'
	}
	var columns = [
        { field: 'id', visible: false},
        { field: '_id', visible: false},
        { field: 'entity', visible: false},
        {field: 'entityId', visible: false},
        {field: 'no', visible: false},
        {title: '扩展属性', field: 'name', align: 'center', valign: 'middle' ,editable:true},
        {title: '值', field: 'value', align: 'center', valign: 'middle',editable:true },
        {title: '操作',  align: 'center', valign: 'middle', width:100, formatter: operationFormatter, events:{
        	'click .del':function(e, value, row, index) {
        		$("#"+tableId).bootstrapTable('remove', {
        	          field: '_id',
        	          values: [row._id]
        	        });
        	}
        }},
      ];
	var extensionsTable = new BSTable(tableId, "/api/entityExtension/queryByEntityId"
			, columns, function(res){
		return res.data.map(r=>{
			r._id=Math.random();
			return r;
		});
	});
	extensionsTable.setPaginationType("client");
	extensionsTable.setMethod("GET");
	extensionsTable.height="${height}";
	if(!!entity){
		extensionsTable.setQueryParam("entity", entity);
	}
	if(!!entityId){
		extensionsTable.setQueryParam("entityId", entityId);
	}
	extensionsTable.init();
// 	extensionsTable.refresh();
	$("#extAddBtn").click(function(){
		$("#"+tableId).bootstrapTable('append', [{
			"_id":Math.random(),
			entity:"${entity}",
			entityId:"${entityId}",
			name:"",
			value:""
		}]);
	});
	$("#dataViewBtn").click(function(){
		Feng.info(JSON.stringify($("#"+tableId).bootstrapTable("getData")));
	});
});
</script>